<script setup lang="ts">
import { addRolePermissionAPI, deleteRolePermissionAPI, getPermissionAPI, getRoleAPI } from "@/api/permission.ts";
import { onMounted, ref, reactive } from "vue";
import { ElMessage } from "element-plus";

// 获取角色列表
const roleList = ref()
const getRole = async () => {
  const res = await getRoleAPI()
  roleList.value = res.data
}

// 权限列表
const permissionList = ref()
const cascaderProps = {
  value: '_id',
  label: 'name',
  children: 'subPermission',
}
const getPermission = async () => {
  const res = await getPermissionAPI()
  permissionList.value = res.data
}

// 添加角色权限
const activePermission = ref()
const addData = reactive({
  roleId: '',
  id: ''
})
const addRolePermission = async (id) => {
  addData.roleId = id
  addData.id = activePermission.value[1]
  const res = await addRolePermissionAPI(addData)
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: '添加成功'
    })
    await getRole()
  } else {
    ElMessage({
      type: 'error',
      message: res.message
    })
  }
}

// 删除角色权限
const permissionName = reactive({
  name: ''
})
const deleteRolePermission = async (id) => {
  const res = await deleteRolePermissionAPI(id, permissionName)
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: '删除成功'
    })
    await getRole()
    permissionName.name = ''
  }
}

onMounted(() => {
  getRole()
  getPermission()
})
</script>

<template>
  <el-card class="card-system">
    <el-collapse accordion style="margin-top: 40px">
      <el-collapse-item v-for="item in roleList" :key="item._id">
        <template #title>
          {{ item.name }}
        </template>
        <div class="collapse-content">
          <div>
            <el-checkbox v-for="item2 in item?.subPermission" checked disabled :key="item2._id" :label="item2.name"
                         @change="onChangeBox" size="large"/>
          </div>
          <div class="add-delete">
            <el-input placeholder="请输入权限名称" clearable v-model="permissionName.name"></el-input>
            <el-button style="margin-left: 20px" @click="deleteRolePermission(item._id)">删除</el-button>
            <el-cascader v-model="activePermission" :options="permissionList" :props="cascaderProps"
                         style="margin: 0 20px" clearable>
              <template #default="{ data }">
                <span>{{ data.name }}</span>
              </template>
            </el-cascader>
            <el-button type="primary" @click="addRolePermission(item._id)">添加</el-button>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </el-card>
</template>

<style scoped lang="scss">
.card-system {
  padding: 0 50px;
  height: calc(90vh - 40px);
  overflow: scroll;
  position: relative;
}

.collapse-content {
  display: flex;
  flex-direction: column;

  .form-content {
    display: flex;
    justify-content: flex-end;
  }
}

.add-delete {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;

  .el-input {
    width: 200px;
  }

  .el-select {
    width: 200px;
    margin: 0 20px;
  }
}
</style>
